<template>
  <div class="page-content">

    <tao-table :data="GroupList" :showPage="false" style="margin-top: 15px">
      <el-table-column label="群组ID" prop="sdk_groupid" />
      <el-table-column label="群组" prop="group_name" />
      <el-table-column label="头像" prop="avatar">
      <template slot-scope="scope">
          <img
            :src="scope.row.avatar || defaultAvatar"
            alt="群头像"
            style="width: 40px; height: 40px; border-radius: 4px; object-fit: cover"
          />
        </template>
      </el-table-column>

      <el-table-column label="类型" prop="qun_type">
        <template slot-scope="scope">
          {{ qunTypeMap[scope.row.qun_type] || '未知类型' }}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" prop="create_at" />

      <el-table-column fixed="right" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="getGroupHistoryMsg(scope.row.sdk_groupid)"
          >
            获取聊天记录
          </el-button>

          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: #FA6962"
            @click="disbandGroup(scope.row.sdk_groupid)"
          >
            解散
          </el-button>
        </template>
      </el-table-column>
    </tao-table>
  </div>
</template>

<script>
import { getGroupId } from "@/utils/auth";
import {
  getImGroupApi,
  getImGroupDetailApi,
  deleteImGroupApi,
  getGroupHistoryMsg
} from "@/api/ImChat";

export default {
  inject: ["reload"],

  data() {
    return {
      GroupName: "显示在这里，你的详情",
      GroupList: [
        // {
        //   ID: "chrome",
        //   groupName: ""
        // }
      ],
      defaultAvatar: require('@/assets/img/avatar/avatar1.jpg'), // 或用绝对地址替代
      qunTypeMap: {
        normal: '正常群',
        chaoqun: '炒群'
      }
    };
  },

  mounted() {
    this.getGroupList();
  },

  methods: {
    // 获取群组列表
    getGroupList() {
      const data = { groupid: getGroupId() };
      getImGroupApi(data).then(res => {
        if (res.code == 200) {
          this.GroupList = res.data.list;
        }
      });
    },

    // 获取群组历史聊天记录
    getGroupHistoryMsg(id) {
      this.$router.push({
        path: "/imgroup/group_history_msg/",
        query: { id }
      });
    },

    // 获取群名字
    getGroupName(id) {
      const data = { groupID: id };
      getImGroupDetailApi(data).then(res => {
        if (res.code === 1) {
          this.GroupName = res.data.name;
          this.$message(this.GroupName);
        }
      });
    },

    // 解散群组
    disbandGroup(id) {
      const data = { groupID: id };
      deleteImGroupApi(data).then(res => {
        if (res.code === 1) {
          this.reload();
          this.$message("删除OK");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
}
</style>
